<template>
  <div class="app-container">
    <el-card>
      <!--工具栏-->
      <div class="head-container">
        <eHeader :permission="permission"/>
        <crudOperation :permission="permission" />
      </div>

      <!--表单组件-->
      <eForm ref="form" />
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="studentId" label="学员编号"/>
        <el-table-column prop="studentName" label="学员名称" />
        <el-table-column prop="typeId" label="车型编号" />
        <el-table-column prop="carType" label="车型" />
        <el-table-column prop="money" label="学费" />
        <el-table-column prop="isPay" label="是否已经付费" >
          <template slot-scope="scope">
            <el-button v-if="scope.row.isPay == true" size="mini" type="success">已付</el-button>
            <el-button v-else="scope.row.isPay == false" size="mini" type="warning">未付</el-button>
          </template>
        </el-table-column>

        <el-table-column  label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </el-card>
  </div>
</template>

<script>
  import checkPermission from '@/utils/permission'
  import crudLearn from '@/api/ceamJobCollect'
  import eForm from './form'
  import eHeader from './header'
  import CRUD, { presenter } from '@crud/crud'
  import crudOperation from '@crud/CRUD.operation'
  import pagination from '@crud/Pagination'
  import udOperation from '@crud/UD.operation'

  // crud交由presenter持有
  const crud = CRUD({
    title: '报学',
    url: 'api/learn',
    sort: ['sort,asc', 'id,desc'],
    crudMethod: { ...crudLearn }
  })

  export default {
    components: { eHeader, eForm, crudOperation, pagination, udOperation },
    mixins: [presenter(crud)],
    data() {
      return {
        delLoading: false,
        permission: {
          add: ['admin', 'hotel:add'],
          edit: ['admin', 'learn:edit'],
          del: ['admin', 'learn:del']
        }
      }
    },
    created() {
      // this.$nextTick(() => {
      //   this.init()
      // })
    },
    methods: {
      checkPermission,

      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      edit(data) {
        this.isAdd = false
        const _this = this.$refs.form
        _this.form = {
          id: data.id,
          routeCn: data.routeCn,
          name: data.name,
          startPoint: data.startPoint,
          endPoint: data.endPoint,
          description: data.description
        }
        _this.dialog = true
      }
    }
  }
</script>

<style scoped>

</style>
